<!DOCTYPE html>
<html lang="zh-cmn-Hans">

<head>
    <meta charset="utf-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge, chrome=1">
    <title>debounce</title>
    <style>
        #container {
            width: 100%;
            height: 200px;
            line-height: 200px;
            text-align: center;
            color: #fff;
            background-color: #444;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <div id="container"></div>
    <button id="button">点击取消</button>
</body>
<script>
    var count = 1;
    var container = document.getElementById('container');

    // 最简陋的数字增加
    function getUserAction(e) {
        // console.log(e);
        container.innerHTML = count++;
    }

    // 增加定时器以进行仿抖
    // function debounce(func, wait) {
    //     var timeout;
    //     return function () {
    //         clearTimeout(timeout);
    //         timeout = setTimeout(func, wait);
    //     }
    // }

    // 第二版
    // function debounce(func, wait) {
    //     var timeout;

    //     return function () {
    //         var context = this;
    //         // console.log(context);
    //         clearTimeout(timeout);
    //         timeout = setTimeout(function(){
    //             func.apply(context);
    //         },wait); 
    //     }
    // }
    // 第三版
    // function debounce(func, wait) {
    //     var timeout;

    //     return function () {
    //         var context = this;
    //         var args = arguments;

    //         clearTimeout(timeout);
    //         timeout = setTimeout(function () {
    //             func.apply(context, args);
    //         },wait);
    //     }
    // }

    // 第四版
    // function debounce(func, wait, immediate) {
    //     var timeout;

    //     return function () {
    //         var context = this;
    //         var args = arguments;

    //         if (timeout) clearTimeout(timeout);
    //         if (immediate) {
    //             // 如果已经执行过, 不再执行
    //             var callNow = !timeout;
    //             timeout = setTimeout(function () {
    //                 timeout = null;
    //             }, wait);
    //             if (callNow) func.apply(context, args);
    //         } else {
    //             timeout = setTimeout(function() {
    //                 func.apply(context, args);
    //             },wait);
    //         }
    //     }
    // }
    // 第五版
    // function debounce(func, wait, immediate) {
    //     var timeout;

    //     return function () {
    //         var context = this;
    //         var args = arguments;

    //         if (timeout) clearTimeout(timeout);
    //         if (immediate) {
    //             // 如果已经执行过, 不再执行
    //             var callNow = !timeout;
    //             timeout = setTimeout(function () {
    //                 timeout = null;
    //             }, wait);
    //             if (callNow) result = func.apply(context, args);
    //         } else {
    //             timeout = setTimeout(function() {
    //                 func.apply(context, args);
    //             },wait);
    //         }
    //         return result;
    //     }
    // }

    // 第六版
    // function debounce(func, wait, immediate) {
    //     var timeout, result;

    //     var debounced = function () {
    //         var context = this;
    //         var args = arguments;

    //         if (timeout) clearTimeout(timeout);
    //         if (immediate) {
    //             // 如果已经执行过, 不再执行
    //             var callNow = !timeout;
    //             timeout = setTimeout(function () {
    //                 timeout = null;
    //             }, wait);
    //             if (callNow) result = func.apply(context, args);
    //         } else {
    //             timeout = setTimeout(function () {
    //                 func.apply(context, args);
    //             }, wait);
    //         }
    //         return result;
    //     };

    //     debounced.cancel = function() {
    //         clearTimeout(timeout);
    //         timeout = null;
    //     };

    //     return debounced;
    // }

    var setUseAction = debounce(getUserAction, 1000, true);
    container.onclick = setUseAction;

    // document.getElementById('button').addEventListener('click', function(){
    //     setUseAction.cancel();
    // });
    
</script>

</html>